<template>
   <div id="app">
        <!-- <Navgate/> -->
       <!-- <Contenter></Contenter> -->
      <!-- <News/> -->
      <!-- <Concer/> -->
      <Header/>
      <router-view></router-view>
    </div>
</template>

<script>

// import HelloWorld from './components/HelloWorld.vue'
// import Contenter from './components/contenter.vue'
// import News from './components/news.vue'
// import Concer from './components/concer.vue'
import Header from './components/header.vue'

window.onload=function(){
        const boxs=document.querySelectorAll('.scroll')
        console.log(boxs);
        const triggerBottom = window.innerHeight 
    window.addEventListener('scroll', scrolls)
      scrolls()
      function scrolls(){
     for(var i=0;i<boxs.length;i++){
      const boxTop = boxs[i].getBoundingClientRect().top
      if(boxTop<triggerBottom){
              
        boxs[i].classList.add('yidong')
        }
     }
        }

      }


export default {
  name: 'App',
  components: {
  
    // Contenter,
    // News,
    // Concer,
    Header
   
    
  },
  methods:{
  reload(){
    window.location.reload()
},

},
  watch:{
    $route(to,from){
      if(to.path!=from.path){
        console.log(true)
          this.reload()

      }
    }

      }
}

      
      
</script>

<style>
*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
#app{
    width: 100%;

}

</style>
